<template>
	<u-form :model="form" ref="formRef" label-position="top" :error-type="errorType">
		<u-form-item :border-bottom="false" :left-icon="phoneIcon" :left-icon-style="{width:'36rpx',height:'36rpx'}"
			label="手机号" prop="phonenumber">
			<u-input type="number" v-model="form.phonenumber" height="100" placeholder="请输入手机号码" clearable
				maxlength="11" showWordLimit />
		</u-form-item>
		<u-form-item :border-bottom="false" :left-icon="codeIcon" :left-icon-style="{width:'36rpx',height:'36rpx'}"
			label="验证码" prop="code">
			<u-input type="number" v-model="form.code" height="100" placeholder="请输入验证码" maxlength="6" clearable />
			<template v-slot:right>
				<text class="code_text" @click="handleCode">{{code}}</text>
			</template>
		</u-form-item>
		<view class="mgt-60">
			<u-button class="login_btn" shape="circle" :ripple="true" type="primary"
				@click="handleLogin">登录/注册</u-button>
			<u-checkbox-group size="30" class="mgt-28">
				<u-checkbox v-model="checked" shape="circle">
					<view class="fs24">
						登录即代表您已阅读并同意
						<text class="agreement" @click="toAgreeMent">《用户协议》</text>与
						<text class="agreement" @click="toAgreeMent">《隐私政策》</text>
					</view>
				</u-checkbox>
			</u-checkbox-group>
			
		</view>
	</u-form>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, onUnmounted } from "vue";

	import type { FormLeftType, FormLeftRules } from "../../../static/src/types/login"
	const phoneIcon = "/static/src/login/phone_icon.png";
	const codeIcon = "/static/src/login/code_icon.png";

	const form = ref<FormLeftType>({
		phonenumber: "",
		code: ""
	})
	const formRef = ref<any>(null);
	const errorType = ref(['message'])
	const rules = ref<FormLeftRules>({
		phonenumber: [
			{ required: true, message: "请输入手机号", trigger: ['change', 'blur'] },
			{ pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确" },
		],
		code: [
			{ required: true, message: "请输入验证码", trigger: ['change', 'blur'] },
			{ len: 6, message: "验证码必须为6位", trigger: ['blur'] }
		]
	});
	const countdown = ref<number>(0);// 倒计时秒数
	const timer = ref<NodeJS.Timeout | null>(null);

	const code = computed(() => {
		return countdown.value > 0 ? `${countdown.value}s` : '获取验证码'
	})
	const checked = ref<boolean>(false)

	const stopTimer = () => {
		if (timer.value) {
			clearInterval(timer.value)
			timer.value = null
		}
	}

	const startTimer = () => {
		// 清除已有定时器
		if (timer.value) {
			clearInterval(timer.value)
		}
		countdown.value = 60
		timer.value = setInterval(() => {
			countdown.value--
			if (countdown.value <= 0) {
				stopTimer()
			}
		}, 1000)as unknown as NodeJS.Timeout
	}

	const handleCode = () => {
		if (countdown.value > 0 && timer.value) return
		countdown.value = 60
		startTimer()
	}

	const emit = defineEmits<{ (e : 'changeData', data : FormLeftType) : void }>();

	const handleLogin = () : void => {
		if (!checked.value) {
			uni.showToast({
				title: '请先阅读并同意用户协议和隐私政策',
				icon: 'none'
			});
			return;
		}
		formRef.value.validate((valid : boolean) => {
			console.log(valid, 'valid')
			if (valid) {
				emit('changeData', form.value);
			}
		});
	};

	const toAgreeMent = () => {
		uni.navigateTo({
			url: '/pages/agreement/index'
		})
	}

	onMounted(() => {
		formRef.value.setRules(rules.value);
	});

	onUnmounted(() => {
		stopTimer()
	})
</script>

<style lang="scss" scoped>
	@import '@/style/style.scss';

	:deep(.u-form-item--left__content__icon) {
		display: flex;
	}

	:deep(.u-form-item--right__content) {
		background: #EEF1FF;
		border-radius: 50rpx;
		padding-left: 23rpx;
		padding-right: 33rpx;
		font-size: 28rpx;
		color: #878999;
	}

	.code_text {
		color: #3C51F2;
	}

	.login_btn {
		background: #3C51F2;
		height: 100rpx;
	}

	.agreement {
		color: #3C51F2;
	}
</style>